<template>
	<view class="meter-reading">
		<view class="top flex-center flex-column">
			<van-image
				src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b6fb892c852500127d8c83/16393825115006064433.png"
				width="80rpx"
				height="80rpx"
			/>
			<view class="name">
				典雅花店
				<van-tag size="small" color="rgb(255,229,207)" text-color="rgb(255,135,70)" class="pa">教育培训</van-tag>
			</view>
			<view class="address">
				面积:50m² 步行街商铺111-61号
			</view>
		</view>
		
		<view class="content">
			<view class="list_1">
				<view v-for="(item, index) in 3" :key="index" class="item flex-space-between">
					<view class="flex-align">
						<view class="round"></view>
						<view>
							<view class="text_1">房租费</view>
							<view class="text_2">截止:2021/12/31</view>
							<van-tag size="small" round color="rgb(245,74,74)">3天到期</van-tag>
						</view>
					</view>
					<view class="text_3">
						<text>5000</text>.00/半年
					</view>
				</view>
			</view>
			
			<view class="title" style="margin: 30rpx 0 20rpx;">
				<text>请录入抄表数字</text>
			</view>
			
			<view class="list_2">
				<view v-for="(item, index) in 2" :key="index" class="item flex-space-between">
					<view>
						<view class="flex-align">
							<view class="round"></view>
							<view class="text_4">用电数</view>
						</view>
						<view class="text_5">上期抄表:2021/12/25</view>
					</view>
					<view class="flex-align">
						<input type="text">
						<view class="unit">度</view>
						<van-uploader v-model="fileList" />
					</view>
				</view>
			</view>
		</view>
		
		<view class="btn">
			<van-button round block color="linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%)" @click="onClick">发送账单</van-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			fileList: []
		}
	},
	methods: {
		onClick() {
			const duration = 1000;
			uni.showToast({
				title: '提示',
				icon: 'none',
				duration
			});
			setTimeout(() => {
				uni.hideToast();
				uni.navigateTo({
					url: '/page_admin/property-catalogue/tenant-property/tenant-property'
				});
			}, duration);
		}
	}
}
</script>

<style lang="scss" scoped>
.meter-reading {
	min-height: 100vh;
	background-color: rgb(243, 243, 243);
	padding-bottom: 130rpx;
	
	.top {
		background-color: #fff;
		padding: 30rpx 0;
		
		.name {
			margin: 20rpx 0;
			font-size: 28rpx;
			font-weight: 700;
			line-height: 28rpx;
			
			/deep/.van-tag {
				border-radius: 10rpx;
			}
		}
		
		.address {
			color: rgb(102,102,102);
			font-size: 26rpx;
			line-height: 25rpx;
		}
	}
	
	.content {
		padding: 20rpx 30rpx;
		
		.list_1 {
			.round {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background-color: rgb(121,242,214);
				margin-right: 30rpx;
			}
			
			.text_1 {
				font-size: 28rpx;
				font-weight: 700;
				line-height: 28rpx;
			}
			
			.text_2 {
				color: rgb(153, 153, 153);
				font-size: 24rpx;
				margin: 10rpx 0 5rpx;
			}
			
			.text_3 {
				font-weight: 700;
				font-size: 30rpx;
				
				text {
					font-size: 36rpx;
				}
			}
		}
		
		.item {
			padding: 15rpx 30rpx;
			background-color: rgb(255,255,255);
			box-shadow: 0px 2rpx 6.86rpx 0.14rpx rgba(0,0,0,0.1);
			border-radius: 10rpx;
			
			& + .item {
				margin-top: 20rpx;
			}
		}
		
		.title text {
			font-size: 32rpx;
			font-weight: 700;
			line-height: 31rpx;
			position: relative;
			z-index: 1;
			
			&::after {
				content: '';
				position: absolute;
				right: 0;
				bottom: 0;
				background-color: rgb(99,93,247);
				border-radius: 4.5rpx;
				width: 62rpx;
				height: 9rpx;
				z-index: -1;
			}
		}
		
		.list_2 {
			/deep/.van-uploader {
				.van-uploader__upload {
					width: 100rpx !important;
					height: 100rpx !important;
					margin: 0;
				}
			}
			
			input {
				border-radius: 5rpx;
				height: 56rpx;
				border: solid 1rpx rgb(239, 239, 239);
				font-size: 28rpx;
				text-align: center;
				width: 200rpx;
			}
			
			.unit {
				margin-left: 4rpx;
				margin-right: 10rpx;
				font-size: 28rpx;
				font-weight: 700;
			}
			
			.round {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background-color: rgb(99,93,247);
				margin-right: 4rpx;
			}
			
			.text_4 {
				font-size: 28rpx;
				font-weight: 700;
				line-height: 27rpx;
			}
			
			.text_5 {
				color: rgb(153,153,153);
				font-size: 22rpx;
				line-height: 22rpx;
				margin-top: 19rpx;
			}
		}
	}
	
	.btn {
		position: fixed;
		bottom: 40rpx;
		left: 0;
		width: 100%;
		padding: 0 40rpx;
	}
}
</style>
